<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 1024px;
            margin: 0 auto;
        }

        .left {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: 200px;
            background-color: #000000 !important;
        }

        .choice ul {
            margin-top: 50px;
        }


       

        .choice li {
            display: inline-block;
            list-style: none;
            width: 100%;    
            border-radius: 2px;
            padding-top: 0;
        }

        .choice li a {
            text-decoration: none;
            font-size: 13px;
            font-weight: bolder;
            cursor: pointer;
            display: inline-block;
            width: 100%;
            height: 50px;
            white-space: nowrap;
            line-height: 50px;
        }



        .sousuo {
            text-align: center;
        }

        .unchoice {
            color: rgba(250, 250, 250, 0.7);
        }

        .unchoice:hover {
            color: rgb(255, 255, 255);
            background-color: #9bc5c1;
        }

        .xuanzhong {
            background-color: #b6b12c;
            color: rgb(253, 253, 253);
        }

        .xuanzhong:hover {
            color: white;
        }

        

        .top h4 {
            position: absolute;
            top: 25px;
            left: 280px;
            background-color: white;
            width: 220px;
            font-weight: bold;
        }

        .sousuo input {
            position: absolute;
            top: 80px;
            left: 240px;
            height: 38px;
            line-height: 1.3;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(84, 81, 81, 0.3);
            border-radius: 2px;
        }

        .sousuo button {
            position: absolute;
            top: 80px;
            left: 425px;
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }

        .sousuo button:hover {
            background-color: #00968766
        }

        .biaoge {
            position: absolute;
            top: 80px;
            left: 240px;
            width: 80%;
        }

        .biaoge table {
            position: absolute;
            top: 60px;
            border-collapse: collapse;
            background-color: white;
            color: #666;
        }

        .biaoge tr td {
            border: 1px solid rgb(132, 132, 132);
        }

        .biaoge td {
            position: relative;
            min-height: 20px;
            line-height: 20px;
            font-size: 14px;
            height: 40px;
        }

        .gouxuana {
            width: 40px;
            text-align: center;
        }

        .shifou {
            zoom: 1.5;
        }

        .shifou[type=checkbox]:checked:after {
            color: #009688;
        }

        .neirong {
            width: 700px;
        }

        .neirong1 {
            display: inline-block;
            width: 95%;
            height: 95%;
            padding: 0 20px;
        }

        .shanchu {
            width: 80px;
            text-align: center;
        }

        .shanchu1 {
            background-color: #22f8ff;
            width: 45px;
            display: inline-block;
            color: white;
            cursor: pointer;
        }

        .wancheng {
            color: rgba(243, 17, 130, 0.854);
            text-decoration: line-through;
        }

        .wei {
            display: none;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="left">
            <div class="choice" lay-filter="navs" style="margin-top: 50px;">
                <ul>
                    <li class="all_item">
                        <a href="javascript:;" class="xuanzhong " id="xx1">&ensp;&ensp;&ensp;所有事项</a>
                    </li>
                    <li class="unflish  unchoice" id="xx2">
                        <a href="javascript:;" class="unchoice" id="xx2">&ensp;&ensp;&ensp;未完成</a>
                    </li>
                    <li class="flished  unchoice" id="xx3">
                        <a href="javascript:;" class="unchoice" id="xx3">&ensp;&ensp;&ensp;已完成</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right">
            <div class="top">
                <div class="line"></div>
                <h4>ToDoList事项清单</h4>
            </div>
            <div class="sousuo">
                <input type="text" placeholder="请输入内容" autocomplete="off" id="item">
                <button onclick="add()">添加</button>
            </div>
            

            <div class="biaoge" name="biaoge">
                <table id="tb">
                    <tr id="1st">
                        <td class="gouxuana">是否完成</td>
                        <td class="neirong">内容</td>
                        <td class="shanchu">删除</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //页面保存
        var table = document.getElementsByTagName("table");
        var str = JSON.parse(window.localStorage.getItem("str"))
        table[0].innerHTML = str;
        var table = document.getElementsByTagName("table");
            console.log(table[0])
            var tr = table[0].getElementsByTagName("tr");
            console.log(tr)
            for (let index = 1; index < tr.length; index++) {
                var td = tr[index].getElementsByTagName("td");
                var input = td[1].getElementsByTagName("input")[0];
                if (tr[index].className === "wei") {
                    tr[index].className = ""
                }
                if (input.className === "neirong1  wancheng") {
                    var input1 = td[0].getElementsByTagName("input")[0];
                    input1.checked = true
                }
            }
        //所有事项
        document.getElementById("xx1").onclick = function () {
            $("#xx1").removeClass();
            $("#xx1").addClass("xuanzhong");
            $("#xx2").removeClass();
            $("#xx2").addClass("unchoice");
            $("#xx3").removeClass();
            $("#xx3").addClass("unchoice");
            var table = document.getElementsByTagName("table");
            console.log(table[0])
            var tr = table[0].getElementsByTagName("tr");
            console.log(tr)
            for (let index = 1; index < tr.length; index++) {
                var td = tr[index].getElementsByTagName("td");
                var input = td[1].getElementsByTagName("input")[0];
                if (tr[index].className === "wei") {
                    tr[index].className = ""
                }
                if (input.className === "neirong1  wancheng") {
                    var input1 = td[0].getElementsByTagName("input")[0];
                    input1.checked = true
                }
            }
        }
        //未完成
        document.getElementById("xx2").onclick = function () {
            $("#xx2").removeClass();
            $("#xx2").addClass("xuanzhong");
            $("#xx1").removeClass();
            $("#xx1").addClass("unchoice");
            $("#xx3").removeClass();
            $("#xx3").addClass("unchoice");
            var table = document.getElementsByTagName("table");
            console.log(table[0])
            var tr = table[0].getElementsByTagName("tr");
            console.log(tr)
            for (let index = 1; index < tr.length; index++) {
                var td = tr[index].getElementsByTagName("td");
                var input = td[1].getElementsByTagName("input")[0];
                if (tr[index].className === "wei") {
                    tr[index].className = ""
                }
                if (input.className === "neirong1  wancheng") {
                    tr[index].className = ("wei")
                }
            }

        }
        //已完成
        document.getElementById("xx3").onclick = function () {
            $("#xx3").removeClass();
            $("#xx3").addClass("xuanzhong");
            $("#xx1").removeClass();
            $("#xx1").addClass("unchoice");
            $("#xx2").removeClass();
            $("#xx2").addClass("unchoice");
            var table = document.getElementsByTagName("table");
            console.log(table[0])
            var tr = table[0].getElementsByTagName("tr");
            console.log(tr)
            for (let index = 1; index < tr.length; index++) {
                var td = tr[index].getElementsByTagName("td");
                var input = td[1].getElementsByTagName("input")[0];
                if (tr[index].className === "wei") {
                    tr[index].className = ""
                }
                if (input.className === "neirong1") {
                    tr[index].className = ("wei")
                } else {
                    var input1 = td[0].getElementsByTagName("input")[0];
                    input1.checked = true
                }

            }
        }
        //添加时间
        function add() {
            var content = document.getElementById("item").value;
            var trObj = document.createElement("tbody");
            trObj.id = new Date().getTime();
            var tr = document.createElement("tr");
            tr.innerHTML = "<td class='gouxuana'><input type='checkbox' class='shifou' onclick='flish(this)'></td><td class='neirong'><input type='tesxt'class='neirong1'value=" + content + "></td><td class='shanchu'><a class='shanchu1' onclick='del(this)'>删除</a></td>";
            trObj.appendChild(tr);
            document.getElementById("tb").appendChild(trObj);
            var str = document.getElementsByTagName("table")[0].outerHTML;
            window.localStorage.setItem("str", JSON.stringify(str));
        }
        //删除事件
        function del(obj) {
            var tbody = obj.parentNode.parentNode.parentNode;
            var tr = tbody.getElementsByTagName("tr")[0];
            tbody.removeChild(tr);
            var str = document.getElementsByTagName("table")[0].outerHTML;
            window.localStorage.setItem("str", JSON.stringify(str));
        }
        //勾选完成
        function flish(obj) {
            var tr = obj.parentNode.parentNode;
            var td = tr.getElementsByTagName("td");
            console.log(td);
            var input = td[1].getElementsByTagName("input")[0];
            var input1 = td[0].getElementsByTagName("input")[0];
            if (input.className === "neirong1") {
                input.className = "";
                input.className = ("neirong1  wancheng");
            } else {
                input.className = "";
                input.className = ("neirong1");
            }
            var str = document.getElementsByTagName("table")[0].outerHTML;
            window.localStorage.setItem("str", JSON.stringify(str));
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>